<template>
	<view>
		<uni-card style="width: 80%;margin: 50px auto;border-radius: 20px" title="新增客户">
			<uni-forms ref="baseForm" :modelValue="formData" :border="true">
				<uni-forms-item name="userName">
					<view class="form-item">
						<uni-icons type="person" size="24"></uni-icons>
						<uni-easyinput :inputBorder="false" v-model="formData.userName" placeholder="请输入用户名" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="nickName">
					<view class="form-item">
						<uni-icons type="staff" size="24"></uni-icons>
						<uni-easyinput :inputBorder="false" v-model="formData.nickName" placeholder="请输入客户昵称" />
					</view>
				</uni-forms-item>
				<!-- 				<uni-forms-item name="password">
					<template v-slot="label">
						<view class="form-item">
							<uni-icons type="locked-filled" size="24"></uni-icons>
							<uni-easyinput v-model="formData.password" placeholder="请输入密码" />
						</view>
					</template>
				</uni-forms-item> -->
				<uni-forms-item name="phonenumber">
					<view class="form-item">
						<uni-icons type="phone" size="24"></uni-icons>
						<uni-easyinput :inputBorder="false" v-model="formData.phonenumber" placeholder="请输入手机" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="email" style="margin-left: 30rpx;">
					<view class="form-item">
						<uni-icons type="email" size="24"></uni-icons>
						<uni-easyinput :inputBorder="false" v-model="formData.email" placeholder="请输入邮箱" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="remark" style="margin-left: 30rpx;">
					<view style="display: flex;">
						<uni-easyinput type="textarea" autoHeight v-model="formData.remark" placeholder="请输入简介" />
					</view>
				</uni-forms-item>
				<!-- 				<uni-forms-item name="captcha">
					<template v-slot="label">
						<view class="form-item">
							<uni-icons type="info" size="24"></uni-icons>
							<uni-easyinput v-model="formData.captcha" placeholder="请输入验证码" />
						</view>
					</template>
				</uni-forms-item> -->
			</uni-forms>
<!-- 			<view class="xieyi text-center">
			  <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
			  <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
			</view> -->
			<view slot="actions" class="card-actions" style="margin-bottom: 8px;">
				<view class="button-group">
					<button type="primary" class="block bg-blue lg round" style="width: 100%;margin-bottom: 10px;"
						@click="determine()">新增</button>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {
		addUser
	} from '@/api/system/user';
	export default {
		data() {
			return {
				// 基础表单数据
				formData: {
					userName: '',
					nickName: '',
					userType: 3,
					password: '123456',
					phonenumber: '',
					email: '',
					companyId: '',
				},
				rules: {
					userName: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名,以字母或数字开头，6至20位'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== '') {
										var reg = /^[A-Za-z0-9]{6,20}$/;
										if (!reg.test(value)) {
                      callback('以字母或数字开头，6至20位');
                    }
									} else {
										callback();
									}
								}
							},
						],
					},
					phonenumber: {
						rules: [
							// {
							// 	required: true,
							// 	errorMessage: '请输入手机号',
							// },
							{
								validateFunction: function(rule, value, data, callback) {
									if (value !== '') {
										var reg =
											/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
										if (!reg.test(value)) {
											callback('请输入有效的手机号码');
										}
									} else {
										// if (this.form.confirmPwd !== '') {
										// 	// this.$refs.uForm.validateField('confirmPwd');
										// 	callback(new Error('请输入新密码'));
										// }
										callback();
									}
								}
							},
						],
					},
					// nickName: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请输入客户昵称',
					// 	}, ],
					// },
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱',
						}, ],
					},
				},
				imageURL: '../static/navigation/regup.png',
				value: '',
				range: [{
					"value": 0
				}]
			}
		},
		created() {},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
		},
		methods: {
			// 隐私协议
			handlePrivacy() {
			  this.$tab.navigateTo("/pages/privacy")
			},
			// 用户协议
			handleUserAgrement() {
					 this.$tab.navigateTo("/pages/protocol")
			},
			determine() {
				uni.showLoading()
				this.$refs.baseForm.validate().then(res => {
					this.formData.companyId = this.$store.getters.companyId
					addUser(this.formData).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							this.$modal.loading("新增客户成功!")
							this.$tab.navigateBack()
						} else {
							this.$modal.loading(res.msg)
						}
					})
				}).catch(err => {
					uni.hideLoading()
				})
			},
			toLogin() {
				this.$tab.navigateTo('/pages/login')
			},
		},
	}
</script>

<style scoped lang="scss" scoped>
	.button-group {
		width: 80%;
		margin: 0 auto;
	}

	uni-image {
		height: 150px
	}

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		// background-image: url(./static/navigation/backreg.png);
		background-repeat: no-repeat;
		min-height: 100%;
		background-size: cover;
		height: auto;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	// /deep/.is-input-border{
	// 	border: none;
	// }
	.text-center {
		font-size: 12px;
	}

	/deep/.uni-data-checklist .checklist-group .checklist-box {
		margin-right: 0px
	}
	.xieyi {
	  color: #333;
	  margin-top: 20px;
	}
</style>
